<template>
    <div class="box">
        
        <van-swipe ref="vswipe" class="my-swipe" :show-indicators='false'  @change="onChange" vertical>
            <van-swipe-item v-for="video in videos" :key="video.id" >
                <van-icon name="add" @click="onLike(video)" color="red" size="40" />
               
                
                 <!-- <van-button @click="onLike()" round type="warning">加入购物车</van-button> -->
                <!-- <van-icon name="like" @click="onLike" color="red" size="40" /> -->
                <video autoplay muted controls :src="video.url"></video>
            </van-swipe-item>
        </van-swipe>
        
    </div>
</template>

<script>
import {getvideo,addVideo} from '@/request'
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Rate } from 'vant';
import { Toast } from 'vant';
import { Icon } from 'vant';
import { getcookie } from '@/utils/cookie';

Vue.use(Icon);
Vue.use(Toast)
Vue.use(Rate);
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
    data () {
        return {
            videos: [],
            
            current: 0,
            
        }
    },
    created() {
        this.request()
    },
    updated() {
        this.updateing()

    },
    methods: {
        async request() {
            this.videos = await getvideo()
        },
        onChange(index) {
            
            this.current = index
            this.updateing()
           
            
        },
        onLike(video) {
           
            var _this = this
           
            var username = getcookie('username')
           
            if(!username) {
                Toast.fail({
                    message: '请先登录！',
                    onClose() {
                       
                        localStorage.setItem('url', '/videos')
                        _this.$router.push('/my/login')
                    }
                });
                return
            }
            video.username = username
            if(video.id)
            {
                video.pid = video.id
                delete video.id
            }
            addVideo(video).then(data => {
                // console.log(data);
                if(data.code === 0)
                {
                    Toast.fail(data.msg)
                }else{
                    Toast.success(data.msg)
                }
            })
        },
        updateing() {
            var vs = document.querySelectorAll('video')
          
            var video = vs[this.current]
            
            
            video.onplay = () => {
            //    video.muted=false
                video.volume = 0.3
                // video.pause()
                
                // video.play()
            }
          
            
           
            video.onended = () => {
                // video.play()
                this.$refs.vswipe.next()
            }
        },
      
    }
}
</script>

<style scoped>
    .box{
        padding: 0 20px 0 10px;
    }
    .my-swipe .van-swipe-item {
        width: 100%;
        height: 100vh;
    }
    video{
        height: 100vh;
        width: 100%;
    }
    .van-icon{
        position: absolute;
        margin: 370px 330px;
        z-index: 999;
    }
   
</style>
